@if (!isDisabled && (assetsState.canCreate | async)) {
    <div class="file-drop" (sqxDropFile)="addFiles($event)" sqxTourStep="upload">
        <h3 class="file-drop-header">{{ "assets.uploadByDrop" | sqxTranslate }}</h3>

        <div class="file-drop-or">{{ "common.or" | sqxTranslate }}</div>

        <div class="file-drop-button">
            <span class="btn btn-success" (click)="fileInput.click()">
                <span>{{ "assets.uploadByDialog" | sqxTranslate }})</span>
                <input class="file-drop-button-input" #fileInput (change)="addFiles($any($event.target!)['files'])" multiple type="file" />
            </span>
        </div>

        <div class="file-drop-info">{{ "assets.uploadHint" | sqxTranslate }}</div>
    </div>
}

@if (assetsState.path | async; as path) {
    <div cdkDropListGroup>
        @if (path.length > 0) {
            <div class="folders">
                @if ((assetsState.hasFolders | async) || (assetsState.parentFolder | async)) {
                    <h5>{{ "common.folders" | sqxTranslate }}</h5>
                }

                <div class="row g-0">
                    @if (assetsState.parentFolder | async; as parent) {
                        <div class="folder-container" cdkDropList [cdkDropListData]="parent?.id" (cdkDropListDropped)="move($event)">
                            <div class="folder-container-over"></div>
                            <sqx-asset-folder [assetPathItem]="parent" (navigate)="assetsState.navigate($event.id)" />
                        </div>
                    }

                    @for (assetFolder of assetsState.folders | async; track assetFolder.id) {
                        <div
                            class="folder-container"
                            cdkDropList
                            [cdkDropListData]="assetFolder.id"
                            (cdkDropListDropped)="move($event)"
                            [cdkDropListEnterPredicate]="canEnter"
                            cdkDropListSortingDisabled>
                            <div class="folder-container-over"></div>
                            <sqx-asset-folder
                                [assetPathItem]="assetFolder"
                                cdkDrag
                                [cdkDragData]="assetFolder"
                                [cdkDragDisabled]="isDisabled || !assetFolder.canMove"
                                (delete)="deleteAssetFolder($event)"
                                (navigate)="assetsState.navigate($event.id)" />
                        </div>
                    }
                </div>
            </div>
        }

        @if (assetsState.assets | async; as assets) {
            @if (assets.length > 0 || snapshot.newFiles.length > 0) {
                <h5>{{ "common.files" | sqxTranslate }}</h5>
            }

            <div class="row g-0" cdkDropList cdkDropListSortingDisabled [class.unrow]="isListView">
                @for (file of snapshot.newFiles; track file) {
                    <sqx-asset
                        [assetFile]="file"
                        [folderId]="assetsState.parentId"
                        [isDisabled]="isDisabled"
                        [isListView]="isListView"
                        (loadDone)="add(file, $event)"
                        (loadError)="remove(file)" />
                }

                @for (asset of assets; track asset.id) {
                    <sqx-asset
                        [asset]="asset"
                        cdkDrag
                        [cdkDragData]="asset"
                        [cdkDragDisabled]="isDisabled || !asset.canMove"
                        (delete)="deleteAsset(asset)"
                        (edit)="edit.emit($event)"
                        [folderIcon]="showFolderIcon && path.length === 0"
                        [isDisabled]="isDisabled"
                        [isListView]="isListView"
                        [isSelectable]="!!selectedIds"
                        [isSelected]="!!isSelected(asset)"
                        (loadDone)="replaceAsset($event)"
                        (selectAsset)="assetSelect.emit(asset)"
                        (selectFolder)="selectFolder(asset)" />
                }
            </div>
        }
    </div>
}
